<template>
  <div class="login-container">
    <div class="login-card">
      <div class="logo-section">
        <div class="logo-icon">医</div>
        <h1>医疗挂号系统</h1>
      </div>
      <form @submit.prevent="handleLogin" class="login-form">
        <div class="form-group">
          <label for="userType">
            <i class="icon-user"></i> 用户类型
          </label>
          <div class="input-wrapper">
            <select 
              id="userType" 
              v-model="selectedUserType"
              class="user-type-select"
              :class="{'input-focus': isFocused.userType}"
              @focus="handleFocus('userType')"
              @blur="handleBlur('userType')"
            >
              <option value="admin">管理员</option>
              <option value="doctor">医生</option>
            </select>
          </div>
        </div>
        <div class="form-group">
          <label for="username">
            <i class="icon-user"></i> 用户名
          </label>
          <div class="input-wrapper">
            <input 
              type="text" 
              id="username" 
              v-model="loginForm.username" 
              placeholder="请输入用户名"
              :class="{'input-focus': isFocused.username}"
              @focus="handleFocus('username')"
              @blur="handleBlur('username')"
            >
          </div>
        </div>
        <div class="form-group">
          <label for="password">
            <i class="icon-lock"></i> 密码
          </label>
          <div class="input-wrapper">
            <input 
              type="password" 
              id="password" 
              v-model="loginForm.password" 
              placeholder="请输入密码"
              :class="{'input-focus': isFocused.password}"
              :type="passwordVisible ? 'text' : 'password'"
              @focus="handleFocus('password')"
              @blur="handleBlur('password')"
            >
            <span class="show-password" @click="togglePasswordVisibility">
              <i :class="passwordVisible ? 'icon-eye' : 'icon-eye-close'"></i>
            </span>
          </div>
        </div>
        <div class="form-actions">
          <button 
            type="submit" 
            :disabled="loading"
            class="login-button"
            :class="{'button-loading': loading}"
          >
            <span v-if="!loading">登 录</span>
            <span v-else class="loading-spinner">
              <span class="spinner-dot"></span>
              <span class="spinner-dot"></span>
              <span class="spinner-dot"></span>
            </span>
          </button>
        </div>
       
      </form>
      <div class="copyright">© 2025 医疗挂号系统 版权所有</div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';
import { useUserStore } from '@/stores/user';

const router = useRouter();
const loading = ref(false);
const userStore = useUserStore();
const loginForm = reactive({
  username: '',
  password: ''
});
const isFocused = ref({ userType: false, username: false, password: false });
const passwordVisible = ref(false);
const selectedUserType = ref('admin'); // 默认选择管理员

// 输入框聚焦效果
const handleFocus = (field) => {
  isFocused.value[field] = true;
};

const handleBlur = (field) => {
  isFocused.value[field] = false;
};

// 密码显示切换
const togglePasswordVisibility = () => {
  passwordVisible.value = !passwordVisible.value;
};

const handleLogin = async () => {
  loading.value = true;
  try {
    const response = await axios.post(
      'http://localhost:8080/hospital5/user/login',
      {
        userName: loginForm.username,
        password: loginForm.password
      },
      {
        headers: {
          'Content-Type': 'application/json'
        }
      }
    );
    console.log('登录成功:', response.data);

    // 从响应中提取 userRole（根据后端实际返回结构，假设在 userInfo 里）
    const userRole = response.data.userInfo.userRole; 
    let targetRouteName = '';

    // 使用 if 语句进行角色判断
    if (userRole === 'admin') {
      targetRouteName = 'AdminHome';
    } else if (userRole === 'doctor') {
      targetRouteName = 'DoctorHome';
    } else if (userRole === 'user') { 
      targetRouteName = 'PatientHome'; 
    } else {
      alert('未知用户角色: ' + userRole);
      return;
    }
    userStore.setUserInfo(response.data.userInfo); 
    // 执行路由跳转
    router.push({
      name: targetRouteName,
      query: {
        role: userRole
      }
    });

  } catch (error) {
    console.error('登录错误:', error);
    alert('登录失败，请检查网络或用户名密码');
  } finally {
    loading.value = false;
  }
};
</script>

<style scoped>
/* 基础样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(135deg, #e6f7ff 0%, #f0f9ff 100%);
  position: relative;
  overflow: hidden;
}

/* 背景装饰元素 */
.login-container::before,
.login-container::after {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: rgba(64, 158, 255, 0.1);
  z-index: 0;
}

.login-container::before {
  top: -150px;
  right: -150px;
}

.login-container::after {
  bottom: -150px;
  left: -150px;
}

/* 登录卡片 */
.login-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  width: 400px;
  max-width: 90%;
  z-index: 1;
  overflow: hidden;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.login-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

/* 头部Logo区域 */
.logo-section {
  background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
  color: white;
  padding: 30px 20px;
  text-align: center;
  position: relative;
}

.logo-icon {
  font-size: 48px;
  font-weight: bold;
  width: 80px;
  height: 80px;
  line-height: 80px;
  border-radius: 50%;
  background: white;
  color: #1890ff;
  margin: 0 auto 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

h1 {
  font-size: 24px;
  font-weight: 600;
  margin: 0;
}

/* 表单区域 */
.login-form {
  padding: 30px;
}

.form-group {
  margin-bottom: 24px;
  position: relative;
}

label {
  display: block;
  margin-bottom: 8px;
  color: #333;
  font-weight: 500;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon-user, .icon-lock, .icon-eye, .icon-eye-close {
  color: #8c939d;
  transition: color 0.2s;
}

label:hover .icon-user, 
label:hover .icon-lock,
label:hover .icon-eye,
label:hover .icon-eye-close {
  color: #1890ff;
}

.input-wrapper {
  position: relative;
}

input, .user-type-select {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  font-size: 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
  background: transparent;
  appearance: none;
}

.input-focus input, .input-focus .user-type-select {
  border-color: #40a9ff;
  box-shadow: 0 0 0 2px rgba(64, 169, 255, 0.2);
}

.user-type-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 10L12 15L17 10' stroke='%238c939d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
  cursor: pointer;
}

.user-type-select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 15L12 10L17 15' stroke='%231890ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.show-password {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #8c939d;
  transition: color 0.2s;
  z-index: 1;
}

.show-password:hover {
  color: #1890ff;
}

/* 按钮区域 */
.form-actions {
  margin-bottom: 20px;
}

.login-button {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.login-button:hover:not(:disabled) {
  background: linear-gradient(135deg, #096dd9 0%, #1890ff 100%);
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
}

.login-button:disabled {
  background: #e6f7ff;
  color: #919eab;
  cursor: not-allowed;
  box-shadow: none;
}

.button-loading {
  animation: pulse 1.5s infinite;
}

.loading-spinner {
  display: flex;
  gap: 4px;
}

.spinner-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: white;
  animation: dotPulse 1.5s infinite;
}

.spinner-dot:nth-child(2) {
  animation-delay: 0.3s;
}

.spinner-dot:nth-child(3) {
  animation-delay: 0.6s;
}

/* 额外选项 */
.extra-options {
  display: flex;
  justify-content: flex-end;
  font-size: 14px;
}

.forgot-password {
  color: #1890ff;
  text-decoration: none;
  transition: color 0.2s;
}

.forgot-password:hover {
  color: #096dd9;
  text-decoration: underline;
}

/* 版权信息 */
.copyright {
  text-align: center;
  padding: 15px;
  font-size: 12px;
  color: #8c939d;
  background: #f0f9ff;
}

/* 动画 */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

@keyframes dotPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0.6);
    opacity: 0.5;
  }
}

/* 响应式设计 */
@media (max-width: 420px) {
  .login-card {
    border-radius: 0;
    height: 100vh;
    width: 100%;
    border-radius: 0;
    box-shadow: none;
  }
  
  .login-card:hover {
    transform: none;
    box-shadow: none;
  }
  
  .login-form {
    padding: 40px 24px;
  }
  
  .logo-section {
    padding: 40px 24px 30px;
  }
}
</style>